<template>
  <div class="app-container">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="批量配置" size="65%" class="box-drawer"
      :with-header="false" :visible.sync="drawerLoading" :show-close="true" @close="cloneDrawer">
      <!-- 头部-->
      <div style="position: relative">
        <div class="drawerTitle">
          <span>批量配置</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
      <div class="container-module">
    <el-form
      v-loading="loading"
      ref="eventsForm"
      label-position="right"
      label-width="120px"
      :model="eventsForm"
      size="small"
      :rules="formRules"
    >
      <div class="blockquote-box">商品限购插件--批量配置（对所选择的商品统一配置，保存后，商品列表中统一赋值）</div>
      <div class="form-box">
        <el-row>
          <el-col :span="10">
            <el-form-item label="日限购数量" prop="daily_purchase" :rules="formRules.newFieldName">
                <el-input style="width:200px;" placeholder="请输入数量" controls-position="right" v-model.trim="eventsForm.daily_purchase" >

                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="周限购数量" prop="week_purchase" :rules="formRules.newFieldName">
                  <el-input style="width:200px;" placeholder="请输入数量" controls-position="right" v-model.trim="eventsForm.week_purchase" >

                  </el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
              <el-form-item label="月限购数量" prop="month_purchase" :rules="formRules.newFieldName">
              <el-input style="width:200px;" placeholder="请输入数量" controls-position="right" v-model.trim="eventsForm.month_purchase" >
              </el-input>
          </el-form-item>
            </el-col>
          <el-col :span="10">
          <el-form-item label="总限购数量" prop="total_purchase" :rules="formRules.newFieldName">
              <el-input style="width:200px;" placeholder="请输入数量" controls-position="right" v-model.trim="eventsForm.total_purchase" >
              </el-input>
          </el-form-item>
           </el-col>
        </el-row>
      </div>
    </el-form>
    </div>
    <div style="margin: 80px 0 0 100px;">
      <el-button
        style="width: 100px"
        type="primary"
        :loading="butloading"
        @click="gradeSubmitForm()"
        >保存</el-button>
      <el-button
        style="width: 100px;margin-left: 66px;"
        type="info"
        @click="resetForm()"
        >重置</el-button>
    </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      butloading:false,//保存按钮loading
      drawerLoading: false,//此弹窗状态
      loading: false,
      eventsForm: {
        daily_purchase:'',
        week_purchase:'',
        month_purchase:'',
        total_purchase:'',
      },
      formRules: {
        newFieldName: [{
          required: false,
          validator: (rule, value, callback) => {
            let req = /^\d+$/;
            if (req.test(value)) {
              callback();
            } else {
              callback(new Error("请输入正整数"));
            }
          },
          trigger: "change",
        }],
      },
    };
  },
  created() {

  },
  methods: {
    //接收父组件传的值
    open() {
      this.drawerLoading = true
    },
    //关闭详情抽屉
    cloneDrawer() {
      this.drawerLoading = false
      setTimeout(() => {
          this.$parent.toggleSelection();
      }, 500);
    },
    //重置
    resetForm(){
      this.eventsForm = {
       daily_purchase:'',
       week_purchase:'',
       month_purchase:'',
       total_purchase:'',
      }
      this.$refs.eventsForm.clearValidate();
    },
    //保存
      gradeSubmitForm() {
        this.$refs.eventsForm.validate((valid, error) => {
          if (valid) {
            this.butloading = true
            this.$nextTick(() => {
              this.butloading = false
              this.cloneDrawer();
              this.$parent.bathsetting(this.eventsForm);
            });
          } else {
          }
        });
      },
  },
};
</script>
<style lang="scss">
.flex-box {
  .el-form-item__content {
    display: -webkit-box;
  }
}

.form-box {
  .form-box-item {
    .el-input {
      width: 250px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
    }

    .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 110px;
    }
  }
}
</style>
<style lang="scss" scoped>
.app-container {
  background-color: #FFF;
  .blockquote-box {
    border-left: 8px solid #409eff;
    padding-left: 14px;
    margin: 16px 0;
    height: 36px;
    line-height: 36px;
    background: #fafafa;
    font-size: 14px;
    font-weight: 600;
  }

  .form-box {


    .form-box-item {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 12px;
      color: #999;

      .left20 {
        margin-left: 20px;
      }

      .tipbox {
        width: 380px;
        font-size: 12px;
        color: #999;
        font-weight: 550;
        line-height: 20px;
        margin-top: 6px;
      }
    }
  }
}
</style>
